<div class="forms-wrap">
  <!-- 基本信息 START -->
  <h3>基本信息</h3>
  <!-- 券包名称 -->
  <nz-form-item>
    <nz-form-label
      nz-col
      nzRequired>
      券包名称
    </nz-form-label>
    <nz-form-control
      nz-col
      nzFlex="400px">
      <input
        nz-input
        maxlength="20"
        placeholder="请输入券包名称"
        [(ngModel)]="formDatas.name"
        [disabled]="routeForms.mode == 2"
      />
    </nz-form-control>
  </nz-form-item >

  <!-- 状态 -->
  <nz-form-item>
    <nz-form-label
      nz-col
      nzRequired>
      状态
    </nz-form-label>
    <nz-form-control
      nz-col
      nzFlex="400px">
      <nz-radio-group
        [(ngModel)]="formDatas.state"
        [disabled]="routeForms.mode == 2">
        <label nz-radio nzValue="0">启用</label>
        <label nz-radio nzValue="1">禁用</label>
      </nz-radio-group>
    </nz-form-control>
  </nz-form-item >

  <!-- 备注 -->
  <nz-form-item>
    <nz-form-label
      nz-col
      nzRequired>
      备注
    </nz-form-label>
    <nz-form-control
      nz-col
      nzFlex="400px">
      <nz-textarea-count [nzMaxCharacterCount]="100">
        <textarea
          class="textarea-cont"
          nz-input
          maxlength="100"
          placeholder="仅内部可见"
          [(ngModel)]="formDatas.remark"
          [disabled]="routeForms.mode == 2">
        </textarea>
      </nz-textarea-count>
    </nz-form-control>
  </nz-form-item >
  <!-- 基本信息 END -->

  <!-- 关联优惠券 START -->
  <h3 class="title-h">关联优惠券</h3>

  <!-- Table -->
  <div class="table-wrap">
    <nz-table
      #basicTable
      nzSize="small"
      nzBordered
      [nzFooter]="tableFootTmp"
      [nzFrontPagination]="false"
      [nzLoadingDelay]="100"
      [nzData]="formDatas.couponIdList"
    >
      <thead>
        <tr>
          <th nzAlign="center" nzWidth="80px">序号</th>
          <th nzAlign="center" nzWidth="120px">业务</th>
          <th nzAlign="center" nzWidth="150px">ID</th>
          <th nzAlign="center" nzWidth="150px">状态</th>
          <th nzAlign="center" nzWidth="150px">优惠券名称</th>
          <th nzAlign="center" nzWidth="150px">类型</th>
          <th nzAlign="center" nzWidth="320px">优惠内容</th>
          <th nzAlign="center">适用用户</th>
          <th nzAlign="center">使用截止时间</th>
          <th nzAlign="center">剩余</th>
          <th nzAlign="center">关联数量</th>
          <th nzAlign="center">操作</th>
        </tr>
      </thead>

      <tbody>
        <tr *ngFor="let data of formDatas.couponIdList; let index = index;">
          <td nzAlign="center">
            {{ index + 1 }}
          </td>
          <!-- 业务 -->
          <td nzAlign="center">{{ businessFilter(data.packType) }}</td>
          
          <!-- ID -->
          <td nzAlign="center">{{ data.id }}</td>

          <!-- 状态 -->
          <td nzAlign="center">
            <ng-container *ngIf="[1, 2].includes(data.packType); else elseGlStaTemplate">
              <!-- 1,2 配件、二手 -->
              <span class="{{ data.status == 1 ? 'font_Green' : data.status == 2 ? 'font_Yellow' :data.status == 6 ? 'font_Black' : 'font_Gray' }}">
                {{ status_To_text(data.status) }}
              </span>
            </ng-container>
            <ng-template #elseGlStaTemplate>
              <!-- 3 回收加价 -->
              <span [ngStyle]="{'color': data.status | recoveryMarkupStatus: 'color'}">
                {{ data.status | recoveryMarkupStatus: 'label' }}
              </span>
            </ng-template>
          </td>

          <!-- 优惠券名称 -->
          <td nzAlign="center">{{ data.name || '-' }}</td>
          
          <!-- 类型 -->
          <td nzAlign="center">
            <ng-container *ngIf="[1, 2].includes(data.packType); else elseGlLxTemplate">
              {{ data.type == 1 ? '满减卷' : data.type == 2 ? '折扣卷 ' : '随机卷' }}
            </ng-container>
            <ng-template #elseGlLxTemplate>
              {{ data.type === 1 ? '满加券' : '百分比券' }}
            </ng-template>
          </td>
          
          <!-- 优惠内容 -->
          <td nzAlign="center">{{ data.useDesc || '-' }}</td>

          <!-- 适用用户 userType 0-通用、1-C端、2-B端 -->
          <td nzAlign="center">
            <nz-tag *ngIf="data.userType == 0">通用</nz-tag>
            <nz-tag [nzColor]="'#2db7f5'" *ngIf="data.userType == 2">B端</nz-tag>
            <nz-tag [nzColor]="'#87d068'" *ngIf="data.userType == 1">C端</nz-tag>
          </td>

          <!-- 使用截止时间 -->
          <td nzAlign="center">
            <span *ngIf="data.limitTimeNum == -1; else elseTimeBlock">{{ data.useEndTime || '-' }}</span>
            <ng-template #elseTimeBlock>领取当日起 {{ data.limitTimeNum }} 内可用</ng-template>
          </td>

          <!-- 剩余 -->
          <td nzAlign="center">
            <span [ngStyle]="{'color': data.remainingNumber < 1000 ? '#f00000' : ''}">
              {{ data.remainingNumber }}
            </span>
          </td>

          <!-- 关联数量 -->
          <td nzAlign="center">
            <nz-input-number
              [nzMin]="0"
              [nzMax]="data.remainingNumber || 1"
              [nzStep]="1"
              [nzPrecision]="1"
              nzPlaceHolder="请输入"
              [(ngModel)]="data.relationNumber"
              [disabled]="routeForms.mode == 2 || (data.remainingNumber <= 0)">
            </nz-input-number>
          </td>

          <!-- 操作 -->
          <td nzAlign="center">
            <a
              nz-button
              nz-button-tdlink
              nzType="link"
              nzDanger
              nz-popconfirm
              nzPopconfirmTitle="确认删除吗?"
              [nzIcon]="iconTpl"
              [disabled]="routeForms.mode == 2"
              (nzOnConfirm)="deleteItems(index)">
              删除
            </a>
            <ng-template #iconTpl>
              <i nz-icon nzType="question-circle-o" style="color: red;"></i>
            </ng-template>
          </td>
        </tr>

        <ng-template #tableFootTmp>
          <div nz-row [nzGutter]="10" nzJustify="center" *ngIf="routeForms.mode != 2">
            <div nz-col>
              <button
                nz-button
                nzType="primary"
                nzSize="default"
                (click)="addTableItems(1)">
                <i nz-icon nzType="plus" nzTheme="outline"></i>添加配件优惠券
              </button>
            </div>

            <div nz-col>
              <button
                nz-button
                nzType="default"
                nzSize="default"
                (click)="addTableItems(2)">
                <i nz-icon nzType="plus" nzTheme="outline"></i>添加二手优惠券
              </button>
            </div>

            <!-- <div nz-col>
              <button
                nz-button
                nzType="primary"
                nzSize="default"
                disabled>
                <i nz-icon nzType="plus" nzTheme="outline"></i>添加定制优惠券
              </button>
            </div> -->

            <div nz-col>
              <button
                nz-button
                nzType="primary"
                nzSize="default"
                class="mbtn-orange"
                (click)="addTableItems(3)">
                <i nz-icon nzType="plus" nzTheme="outline"></i>添加回收加价券
              </button>
            </div>
          </div>
        </ng-template>
        <!-- <tr *ngIf="routeForms.mode != 2">
          <td colspan="11" class="table-foot">
            <a nz-button nzType="link" (click)="addTableItems()">
              <i nz-icon nzType="plus" nzTheme="outline"></i>添加
            </a>
          </td>
        </tr> -->
      </tbody>
    </nz-table>

    <!-- 分页template -->
    <!-- <ng-template #totalTemplate let-total>共有 {{ tableForms.total }} 条</ng-template> -->
  </div>
  <!-- 关联优惠券 END -->

  <!-- 提示 -->
  <div class="foot-tip">
    <dl>
      <dt>※ 请注意，券包发放的时候，无论优惠券处于什么状态都会发放成功</dt>
      <!-- <dd>1，券包的状态必须是“启用”；</dd>
      <dd>2，优惠券的状态必须是“审核通过/进行中”；</dd>
      <dd>3，优惠券的剩余数量必须大于关联的数量；</dd>
      <dd>4，优惠券的适用用户必须匹配用户身份；</dd>
      <dd>5，优惠券的适用截止日期必须在发放日期之后；</dd> -->
    </dl>
  </div>
</div>

<nz-card class="m-t-4">
  <div nz-row nzJustify="center">
    <button
      *ngIf="routeForms.mode != 2"
      nz-button
      nzType="primary"
      class="m-r-10"
      [nzLoading]="submitLoading"
      (click)="subFormData()"
    >保存</button>

    <app-bt-group
      btType="default"
      btText="返回">
    </app-bt-group>
  </div>
</nz-card>

<!-- model START -->
<nz-modal
  [nzWidth]="1200"
  [(nzVisible)]="isVisible"
  [nzTitle]="'请选择' + this.businessFilter(this.addCouponType) + '券'"
  [nzFooter]="null"
  (nzOnCancel)="handleCancel()">

  <ng-container *nzModalContent>
    <div class="model-seach">
      <div class="seach-item">
        <label class="seach-item-label">优惠券：</label>
        <input
          class="seach-ipt"
          nz-input
          placeholder="请输入ID/名称"
          [(ngModel)]="modelSeachForms.name"
        />
      </div>
    
      <button
        nz-button
        nzType="primary"
        (click)="seachData()">
        查询
      </button>
      <button
        nz-button
        nzType="default"
        (click)="resetData()">
        重置
      </button>
      <button
        nz-button
        nzType="primary"
        (click)="relationData()">
        关联已选优惠券 {{ setOfCheckedId.size }}
      </button>
    </div>

    <!-- tip -->
    <p class="tip-txt">※ 仅显示“审核通过/进行中”的优惠券</p>

    <!-- table -->
    <nz-table
      #modelTable
      nzSize="small"
      nzShowSizeChanger
      nzShowQuickJumper
      nzOuterBordered
      nzTableLayout="fixed"
      [nzFrontPagination]="false"
      [nzLoadingDelay]="100"
      [nzLoading]="modelTableForms.tableLoading"
      [nzData]="modelTableData"
      [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
      [nzTotal]="modelTableForms.total"
      [nzPageIndex]="modelTableForms.pageNum"
      [nzPageSize]="modelTableForms.pageSize"
      [nzShowTotal]="modelTotalTemplate"
      (nzPageIndexChange)="onPageIndexChange($event)"
      (nzPageSizeChange)="onPageSizeChange($event)"
      (nzCurrentPageDataChange)="onCurrentPageDataChange($event)">
      <thead>
        <tr>
          <th
            [width]="50"
            nzAlign="center"
            [(nzChecked)]="checked"
            [nzIndeterminate]="indeterminate"
            (nzCheckedChange)="onAllChecked($event)">
          </th>
          <th nzAlign="center">ID</th>
          <th nzAlign="center">状态</th>
          <th nzAlign="center">优惠券名称</th>
          <th nzAlign="center">类型</th>
          <th nzAlign="center">优惠内容</th>
          <th nzAlign="center">适用用户</th>
          <th nzAlign="center">使用截至日期</th>
          <th nzAlign="center">剩余</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of modelTable.data">
          <td
            [nzChecked]="setOfCheckedId.has(data.id)"
            (nzCheckedChange)="onItemChecked(data.id, $event, data)">
          </td>
          <!-- ID -->
          <td nzAlign="center">{{ data.id }}</td>
          <!-- 状态 -->
          <td nzAlign="center">
            <ng-container *ngIf="[1, 2].includes(addCouponType); else elseStaTemplate">
              <!-- 1,2 配件、二手 -->
              <span class="{{ data.status == 1 ? 'font_Green' : data.status == 2 ? 'font_Yellow' :data.status == 6 ? 'font_Black' : 'font_Gray' }}">
                {{ status_To_text(data.status) }}
              </span>
            </ng-container>
            <ng-template #elseStaTemplate>
              <!-- 3 回收加价 -->
              <span [ngStyle]="{'color': data.status | recoveryMarkupStatus: 'color'}">
                {{ data.status | recoveryMarkupStatus: 'label' }}
              </span>
            </ng-template>
          </td>
          <!-- 优惠券名称 -->
          <td nzAlign="center">{{ data.name || '-' }}</td>
          <!-- 类型 -->
          <td nzAlign="center">
            <ng-container *ngIf="[1, 2].includes(addCouponType); else elseLxTemplate">
              {{ data.type == 1 ? '满减卷' : data.type == 2 ? '折扣卷 ' : '随机卷' }}
            </ng-container>
            <ng-template #elseLxTemplate>
              {{ data.type === 1 ? '满加券' : '百分比券' }}
            </ng-template>
          </td>
          <!-- 优惠内容 -->
          <td
            nzAlign="center"
            nzEllipsis
            nz-popover
            [nzPopoverContent]="data.useDesc || '-'"
            [nzPopoverOverlayStyle]="{
              'max-width': '600px',
              'word-break': 'break-all'
            }"
          >
            {{ data.useDesc || '-' }}
          </td>
          <!-- 适用用户 -->
          <td nzAlign="center">
            <nz-tag *ngIf="data.userType == 0">通用</nz-tag>
            <nz-tag [nzColor]="'#2db7f5'" *ngIf="data.userType == 2">B端</nz-tag>
            <nz-tag [nzColor]="'#87d068'" *ngIf="data.userType == 1">C端</nz-tag>
          </td>
          <!-- 使用截至日期 -->
          <td nzAlign="center">
            <span *ngIf="data.limitTimeNum == -1; else elseTimeBlock">{{ data.useEndTime || '-' }}</span>
            <ng-template #elseTimeBlock>领取当日起 {{ data.limitTimeNum }} 多少内可用</ng-template>
          </td>
          <!-- 剩余 -->
          <td nzAlign="center">
            <span [ngStyle]="{'color': data.remainingNumber < 1000 ? '#f00000' : ''}">
              {{ data.remainingNumber || '-' }}
            </span>
          </td>
        </tr>
      </tbody>
    </nz-table>

    <!-- 分页template -->
    <ng-template #modelTotalTemplate let-total>共有 {{ modelTableForms.total }} 条</ng-template>
  </ng-container>
</nz-modal>
<!-- model END -->